import React, { Component } from 'react';
import { Link } from 'react-router-dom';
// import './../register/register.scss';
import './login.scss'
class Com extends Component {
  constructor (props) {
    super(props);
    this.state = {
      flag0: false,
      tel: "",
      val: ""
    }
  }
  change () {
    let tel = this.refs.phone.value
    if (/^1(3|4|5|7|8)\d{9}$/.test(tel)) {
      this.setState({
        tel: "手机号码格式正确",
        flag0: true
      })
    } else {
      this.setState({
        tel: "手机号码格式有误",
        flag0: false
      })
    }
  }
  submit () {

    if (this.state.flag0) {
      let formData = {
        username: this.refs.phone.value,
        password: this.refs.code.value
      }
      fetch('https://sun.daxunxun.com/api/users/login',{
        method: "POST", 
        headers: { 
          "Content-Type": "application/json"
          }, 
          body: JSON.stringify(formData)
      })
      .then(res => res.json())
      .then(data =>{
        console.log(data)
        console.log(this.props)
        if (data.code === 1) {
          alert("登录成功")
          localStorage.setItem('uid', JSON.stringify(data.uid))
          localStorage.setItem('username', JSON.stringify(data.username))
          localStorage.setItem('names', JSON.stringify(data.names))
          this.props.history.push('/home')
        } else {
          alert("账号或密码错误，请重新登录")
          this.props.history.go()
        }
        
      })
    } else {
      alert("请输入正确的用户名和密码")
      this.props.history.go()
    }
  }
  render () {
    return (
      <div className = "container">
        <div className = "reg-header">
          <nav className = "reg-headerNav">
            <Link to ="/" ><div className="logo"></div></Link>
            <div className="reg-user">
                没有账号?
                <Link to="/register">注册</Link>
            </div>
          </nav>
        </div>
        <div className = "log-container">
        <div className = "logID">经常登录的同志才是好同志</div>
        <div className="log-layout">
          <div className="log-left">
            <div className="log-qq"><span className= "iconfont icon-qq"></span> QQ登录</div>
            <div className = "log-weibo"><span className= "iconfont icon-weibo"></span> 微博登录</div>
            <div className = "log-douban"><span className= "iconfont icon-douban"></span>豆瓣登录</div>
          </div>
          <div className = "log-right">
            <div className="log-tel">
              <div className="log-telnum">手机号</div>
              <div className="log-pure">
                <select className="log-country-code" name="country_code">
                    <option value="86" >中国大陆 +86 </option>
                    <option value="886" >中国台湾 +886 </option>
                    <option value="852" >中国香港 +852 </option>
                    <option value="853" >中国澳门 +853 </option>
                    <option value="1" >美国 +1 </option>
                    <option value="44" >英国 +44 </option>
                    <option value="1" >加拿大 +1 </option>
                    <option value="61" >澳大利亚 +61 </option>
                    <option value="82" >韩国 +82 </option>
                    <option value="81" >日本 +81 </option>
                    <option value="62" >印尼 +62 </option>
                    <option value="66" >泰国 +66 </option>
                    <option value="60" >马来西亚 +60 </option>
                    <option value="65" >新加坡 +65 </option>
                    <option value="33" >法国 +33 </option>
                    <option value="49" >德国 +49 </option>
                    <option value="39" >意大利 +39 </option>
                    <option value="41" >瑞士 +41 </option>
                    <option value="31" >荷兰 +31 </option>
                    <option value="45" >丹麦 +45 </option>
                    <option value="51" >秘鲁 +51 </option>
                    <option value="84" >越南 +84 </option>
                    <option value="63" >菲律宾 +63 </option>
                    <option value="95" >缅甸 +95 </option>
                    <option value="7" >俄罗斯 +7 </option>
                    <option value="855" >柬埔寨 +855 </option>
                    <option value="91" >印度 +91 </option>
                    <option value="856" >老挝 +856 </option>
                    <option value="55" >巴西 +55 </option>
                    <option value="64" >新西兰 +64 </option>
                    <option value="54" >阿根廷 +54 </option>
                    <option value="34" >西班牙 +34 </option>
                    <option value="46" >瑞典 +46 </option>
                    <option value="351" >葡萄牙 +351 </option>
                    <option value="32" >比利时 +32 </option>
                    <option value="57" >哥伦比亚 +57 </option>
                    <option value="353" >爱尔兰 +353 </option>
                    <option value="43" >奥地利 +43 </option>
                    <option value="971" >阿拉伯联合酋长国 +971 </option>
                    <option value="52" >墨西哥 +52 </option>
                    <option value="94" >斯里兰卡 +94 </option>
                    <option value="48" >波兰 +48 </option>
                    <option value="358" >芬兰 +358 </option>
                    <option value="56" >智利 +56 </option>
                    <option value="47" >挪威 +47 </option>
                    <option value="263" >津巴布韦 +263 </option>
                    <option value="36" >匈牙利 +36 </option>
                    <option value="996" >吉尔吉斯斯坦 +996 </option>
                    <option value="352" >卢森堡 +352 </option>
                    <option value="264" >纳米比亚 +264 </option>
                    <option value="27" >南非 +27 </option>
                </select>
                <span className="iconfont icon-&#xe6aa;"></span>
              </div>
              <div className="log-numinp">
                <input className="log-telinp" onBlur={ this.change.bind(this) } type="text" ref="phone" name="username" placeholder="请输入手机号"/><span>{ this.state.tel }</span>
              </div>
            </div> 
            <div className ="log-verify">
              <div className="log-verifyCode">密码</div>
              <div className="log-verifyInp"><input type="password" ref="code" name="password" placeholder="请输入密码"/></div><span>{ this.state.val }</span>
            </div>
            <div className="log-email">
            <a href="/">通过邮箱登录</a>
            </div>
            <div className="log-way">
              <div>
                <input type="checkbox" name="remember" id="remember" />记住我 
              </div>       
                <Link to="/">忘记密码</Link>
            </div>
            <div className="log-agree">
              <input id="regagreement"  type="checkbox"/>
              <label>我已阅读并同意<a href="/regagreement/" target="_blank">《下厨房注册使用协议》</a></label>
            </div>
            <div className="log-btn">
              <input type="button" onClick={ this.submit.bind(this)} value="登录"/>
            </div>
          </div>
        </div>
        </div>
      </div>
    )
  }
}

export default Com;
